<template>
  <div class='u-scheduleTable'>
    <!-- 标题日期 -->
    <ul class="u-scheduleTable_title list">
      <li class='item' v-for='(v, i) in weekData' :key='i'>{{ v.desc }}</li>
    </ul>
    <!-- 内容 -->
    <div class="u-scheduleTable_content">
      <!-- 表格内容 -->
      <ul class='list' v-for='(v) in data' :key='v.id'>
        <li class='item' v-for='(item) in v.list' :key='item.id' :style="{color: item.color}">
          <span>{{ item.desc }}</span>
          <!-- i > 0 && (!item.hasData || (item.hasData && v.date > currentTime)) -->
          <i class='el-icon-plus' v-show='item.dateStamp > currentTime && ((item.hasData && item.rearrangeable ==="1") || (!item.hasData))' @click='to(item)'></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'u-scheduleTable',

  props: {
    weekData: {
      default: []
    },
    data: {
      default: []
    }
  },

  computed: {
  },

  data() {
    return {
      classesTimeData: [],
      currentTime: new Date().getTime()
    }
  },

  mounted() {
    console.log(this.currentTime)
  },

  methods: {
    ...mapMutations(['setTabRoutes']),

    routerPush(type, args) {
      // push 到缓存里
      this.setTabRoutes({ type: 'add', obj: { ...this.getRouterInfoAccordingName(type), ...args } })
    },

    to({ hasData, id }) {
      if (!hasData) {
        this.routerPush('lesson_scheduleAdd')
        this.$router.push({ name: 'lesson_scheduleAdd' })
      } else {
        const query = { id }
        this.routerPush('lesson_scheduleDetail', { query })
        this.$router.push({ name: 'lesson_scheduleDetail', query })
      }
    }
  }
}
</script>

<style lang='less'>
@color: #e5e5e5;

.u-scheduleTable {
  border: solid 1px @color;
  border-bottom: 0;
  border-right: 0;
  .list {
    display: flex;
    width: 100%;
  }
  .item {
    flex: 1;
    text-align: center;
    border-bottom: 1px solid @color;
    border-right: 1px solid @color;
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      font-size: 16px;
      padding-left: 10px;
    }
  }
  &_title {
  }
  &_content {
  }
  &_aside {
    display: block;
  }
}
</style>